<template>
  <!-- 历史治疗申请 -->
  <div class="app-container">
    <div class="head-container-app-sole-lishi">
      <div class="yzlb">
        医嘱列表 &nbsp;<el-input v-model="args.treatmentNameOrRef" placeholder="项目名称" class="width-200" />
      </div>
      <div>
        开始时间:
        <el-date-picker v-model="dateValue" type="daterange" range-separator="至" start-placeholder="开始日期"
          end-placeholder="结束日期" class="width-260" value-format="yyyy-MM-dd" />
        <!-- @change="handleDateChange" -->
      </div>
      <el-select v-model="args.adviceStates" placeholder="全部状态" class="left-select width-150" clearable>
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-select v-model="args.applyDepartmentCode" placeholder="开单科室" class="left-select width-150"
        @change="getdoctorSelect()" clearable>
        <el-option v-for="item in departmentOption" :key="item.departmentCode" :label="item.departmentName"
          :value="item.departmentCode" />
      </el-select>
      <el-select v-model="args.applyDoctorId" placeholder="开单医生" class="left-select width-150" clearable>
        <el-option v-for="item in doctorOption" :key="item.aid" :label="item.realname" :value="item.aid" />
      </el-select>

      <el-button type="primary" size="mini" class="left-btn" @click="inquireBtn()">查询</el-button>

      <el-button type="primary" size="mini" class="left-btn" @click="selectDelete()">作废</el-button>
    </div>

    <el-table :data="tableData" style="width: 100%" class="left-table" :cell-style="cellStyle"
      @selection-change="handleSelectionChange" :header-cell-style="{
        background: '#eef1f6',
        color: '#606266',
        textAlign: 'center',
      }" border>
      <el-table-column type="selection" :selectable="selectable" width="50" align="center" />
      <el-table-column type="index" label="序号" width="55" />
      <el-table-column prop="patientName" label="姓名" />
      <el-table-column prop="gender" label="性别" width="55">
        <template #default="{ row }">
          {{ getGenderText(row.gender) }}
        </template>
      </el-table-column>
      <el-table-column prop="outpatientNum" label="门诊号" />
      <el-table-column prop="applyTime" label="医嘱开立时间">
        <template slot-scope="scope">
          {{ createTime(scope.row.applyTime) }}
        </template>
      </el-table-column>
      <el-table-column prop="adviceStates" label="状态" width="100">
        <template slot-scope="scope">
          <el-tag :type="getStatusText(scope.row.adviceStates)[1]">
            {{ getStatusText(scope.row.adviceStates)[0] }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="treatmentName" label="项目名称" />
      <el-table-column prop="applyDepartmentName" label="申请科室" />
      <el-table-column prop="applyDoctor" label="申请医生" />
      <el-table-column prop="batchId" label="批次ID" v-if="false" />
      <el-table-column prop="adviceId" label="医嘱ID" v-if="false" />
      <el-table-column label="操作" width="240">
        <template slot-scope="scope">
          <!-- <el-link type="primary" size="mini" v-show="scope.row.adviceStates == 0"
            @click="handleRevise(scope.row.batchId)">修改</el-link> -->
          <el-link type="primary" size="mini" v-show="scope.row.patientType == 1 && scope.row.adviceStates == 1"
            @click="handleSignBtn(scope.row.adviceId)">签署</el-link>
          <el-link type="success" size="mini" v-show="scope.row.adviceStates != 0"
            @click="handleDetails(scope.row.batchId)">详情</el-link>
          <!-- <el-button type="primary" size="mini" @click="handleSign(scope.row.batchId)">签署</el-button> -->
          <el-link type="danger" size="mini" v-show="scope.row.adviceStates == 1 ||
            scope.row.adviceStates == 2 ||
            scope.row.adviceStates == 3
            " @click="clickCancelBtn(scope.row.adviceId)">作废</el-link>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="签署" :visible.sync="dialog.show" :width="dialog.width" :close-on-click-modal="false">
      <el-input v-model="signArgs.signName"> </el-input>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog.show = false">取 消</el-button>
        <el-button type="primary" @click="handleSign()">确 定</el-button>
      </div>
    </el-dialog>

    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="args.page"
      :page-sizes="[10, 20, 30, 50]" :page-size="args.size" layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
import { getMethodRequest } from "@/api/common.js";
import {
  sendListQuery,
  sendDepartmentQuery,
  sendDoctorQuery,
  sendCancelQuery,
  sendSignQuery,
} from "@/api/outpatient/historyApply";
import { sendAdviceQuery } from "@/api/outpatient/medicalAdvice";
import informedConsent from "@/views/outpatient/treatmentBilling/InformedConsent";

export default {
  name: "historyApply",
  data() {
    return {
      options: [
        {
          value: "0",
          label: "未提交",
        },
        {
          value: "1",
          label: "已提交",
        },
        {
          value: "2",
          label: "已签署",
        },
        {
          value: "3",
          label: "执行中",
        },
        {
          value: "4",
          label: "已完成",
        },
        {
          value: "5",
          label: "已作废",
        },
      ],
      departmentOption: [],
      doctorOption: [],
      dateValue: [],
      patientInfo: {},
      multipleSelection: [], // 存储多选数据
      treatmentInformedInfo: {
        //治疗知情同意书参数
        signName: "",
        treatmentTarget: [],
        dicPatientRelation: "",
        coreRisk: [],
        fingerprint: "",
      },
      total: 0,
      args: {
        treatmentNameOrRef: "",
        applyTimeBegin: "",
        applyTimeEnd: "",
        adviceStates: "",
        applyDepartmentCode: "",
        applyDoctorId: "",
        queryPage: 1,
        page: 1,
        size: 10,
      },
      tableData: [
        // {
        //   index: 0, //"序号",
        //   adviceId: 0, //"医嘱ID",
        //   batchId: "", //"批次ID",
        //   treatmentId: 0, //"治疗项目ID",
        //   patientId: 0, // "患者ID",
        //   patientName: "", //"患者名称",
        //   patientType: 0, //"患者类别 1=门诊 2=住院 3=其他",
        //   gender: 0, //"性别 0=女 1=男",
        //   bedNum: "", //"床号",
        //   admissionNum: "", //"住院号",
        //   outpatientNum: "", //"门诊号",
        //   applyTime: "", // "医嘱开立时间",
        //   adviceStates: 0, // "医嘱状态： 0=未提交 1=已提交 2=已签署 3=执行中 4=已完成 5=已作废",
        //   treatmentName: "", //"治疗项目名称",
        //   applyDepartmentCode: "", // "申请科室编码",
        //   applyDepartmentName: "", // "申请科室名称",
        //   applyDoctor: "", // "申请医生",
        // },
      ],
      signArgs: {
        adviceId: "",
        signName: "",
      },
      dialog: {
        //dialog相关参数
        show: false,
        width: "30%",
        view: "",
      },
    };
  },
  components: {
    informedConsent,
  },
  methods: {
    close() {
      this.dialog = {
        show: false,
        width: "40%",
        view: "",
      };
    },
    // 处理每页显示条数变化的逻辑
    handleSizeChange(val) {
      this.args.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      // 处理当前页码变化的逻辑
      this.args.page = val;
      this.getList();
    },
    handleDateChange(val) {
      this.args.applyTimeBegin = val[0];
      this.args.applyTimeEnd = val[1];
      if (this.dateValue == []) {
        this.args.page = 1;
        this.args.applyTimeBegin = "";
        this.args.applyTimeEnd = "";
      }
    },
    getdoctorSelect() {
      sendDoctorQuery(this.args.applyDepartmentCode).then((res) => {
        this.doctorOption = res.content;
      });
    },
    getList() {
      sendListQuery(this.args).then((res) => {
        this.tableData = res.content;
        this.total = res.totalElements;
      });
    },
    inquireBtn() {
      this.args.page = 1;
      this.getList();
    },
    // 修改按钮
    handleRevise(val) {
      this.$router.push("/outpatient/medicalAdvice");
      this.$store.commit("setBatchId", val);
      this.$router.push({ name: "medicalAdvice", params: { batchId: val } });
    },
    // 详情按钮
    handleDetails(val) {
      // this.$router.push("/outpatient/treatmentBilling");
      this.$store.commit("setBatchId", val);
      this.$store.commit("setIsReviseBtn", false);
      this.$router.push({ name: "treatmentBilling", params: { batchId: val } });
    },
    // 签署按钮
    handleSignBtn(val) {
      this.dialog.show = true;
      this.signArgs.adviceId = val;
    },
    // 签署确认
    handleSign() {
      this.dialog.show = true;
      sendSignQuery(this.signArgs).then((res) => {
        if (res.code == 0) {
          this.getList();
          this.dialog.show = false;
          this.$message({
            message: "签署成功！",
            type: "success",
          });
        }
      });
    },
    // 作废按钮
    clickCancelBtn(data) {
      this.$confirm("是否确定作废该条医嘱？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          sendCancelQuery([data])
            .then((res) => {
              this.$message({
                message: "该条医嘱作废成功！",
                type: "success",
              });
              this.getList();
            })
            .catch(() => {
              this.$message({
                type: "danger",
                message: "医嘱作废失败",
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "该条医嘱作废失败",
          });
        });
    },
    // 判断多选框是否可以多选
    selectable(row, index) {
      if (
        row.adviceStates == 1 ||
        row.adviceStates == 2 ||
        row.adviceStates == 3
      ) {
        return true;
      } else {
        return false;
      }
    },
    // 多选选中后进行的操作
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 作废按钮操作
    selectDelete() {
      if (this.multipleSelection.length == 0) {
        this.$message({
          message: "请先选择再进行作废！",
          type: "warning",
        });
      } else {
        let data = this.multipleSelection.map((item) => item.adviceId);
        this.$confirm("是否确定作废选中医嘱？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            sendCancelQuery(data)
              .then((res) => {
                this.$message({
                  message: "医嘱作废成功！",
                  type: "success",
                });
                this.getList();
              })
              .catch(() => {
                this.$message({
                  type: "danger",
                  message: "医嘱作废失败",
                });
              });
          })
          .catch(() => {
            this.$message({
              type: "danger",
              message: "医嘱作废失败",
            });
          });
      }
    },
    getStatusText(status) {
      switch (status) {
        case 0:
          return ["未提交", "info"];
        case 1:
          return ["已提交", ""];
        case 2:
          return ["已签署", "success"];
        case 3:
          return ["执行中", "warning"];
        case 4:
          return ["已完成", "success"];
        case 5:
          return ["已作废", "danger"];
        default:
          return ["未知状态", "info"];
      }
    },
    getGenderText(Gender) {
      switch (Gender) {
        case 0:
          return "女";
        case 1:
          return "男";
        default:
          return "";
      }
    },
    createTime(val) {
      // 处理时间戳
      const date = new Date(val);
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      let hours = date.getHours();
      hours = hours < 10 ? `0${hours}` : hours;
      let minutes = date.getMinutes();
      minutes = minutes < 10 ? `0${minutes}` : minutes;
      let seconds = date.getSeconds();
      seconds = seconds < 10 ? `0${seconds}` : seconds;

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    // 修改table cell样式
    cellStyle({ row, column, rowIndex, columnIndex }) {
      return "text-align:center;";
    },
  },
  mounted() {
    // 在组件挂载到 DOM 后执行的操作
    sendDepartmentQuery().then((res) => {
      this.departmentOption = res.content;
    });
    this.getList();
    this.getdoctorSelect();
  },
  watch: {
    dateValue(newValue) {
      if (newValue == null) {
        this.args.applyTimeBegin = "";
        this.args.applyTimeEnd = "";
      } else {
        this.args.applyTimeBegin = newValue[0];
        this.args.applyTimeEnd = newValue[1];
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  background-color: #fff;

  .width-100 {
    width: 100px;
  }

  .width-150 {
    width: 150px;
  }

  .width-180 {
    width: 180px;
  }

  .width-200 {
    width: 200px;
  }

  .width-230 {
    width: 230px;
  }

  .width-260 {
    width: 260px;
  }

  /deep/ .el-dialog__body {
    padding: 0px 10px;
  }

  /deep/ .el-date-editor .el-range-separator {
    width: 8%;
    padding: 0;
  }

  .head-container-app-sole-lishi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    .yzlb {
      font-weight: 600;
      margin-right: 10px;
    }

    .left-select,
    .left-btn {
      margin-left: 10px !important;
    }
  }

  #btn {
    margin-bottom: 10px;
  }

  .el-link {
    margin: 0px 5px;
  }

  .el-pagination {
    text-align: center;
    margin-top: 8px;
  }
}
</style>
